<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-date-picker v-model="searchForm.date" unlink-panels type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
          <el-button v-if="info.type == 1 || info.type == 3" type="warning" @click.stop="drawInfo(1)">运营划账
          </el-button>
          <el-button v-if="info.type == 2 || info.type == 4" type="warning" @click.stop="drawInfo(2)">商户划账
          </el-button>
          <el-button v-if="info.type == 2 || info.type == 4" type="warning" @click.stop="drawInfo(3)">配送划账
          </el-button>
          <el-button v-if="info.type == 2 || info.type == 4" type="warning" @click.stop="drawInfo(4)">楼管划账
          </el-button>
          <el-button v-if="info.type == 2 || info.type == 4" type="warning" @click.stop="drawInfo(5)">装箱划账
          </el-button>
          <el-button type="danger" @click.stop="drawLog">转账记录</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="order_no" label="订单编号" width="100"></el-table-column>
        <el-table-column prop="total_price" label="总价">
          <template slot-scope="scope">
            ¥{{scope.row.total_price}}
          </template>
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价">
          <template slot-scope="scope">
            ¥{{scope.row.goods_price}}
          </template>
        </el-table-column>
        <el-table-column prop="delivery_price" label="服务费">
          <template slot-scope="scope">
            ¥{{scope.row.delivery_price}}
          </template>
        </el-table-column>
        <el-table-column prop="floor_price" label="配送费" width="90">
          <template slot-scope="scope">
            ¥{{scope.row.floor_price}}
          </template>
        </el-table-column>
        <el-table-column prop="company_price" label="支付通道收费">
          <template slot-scope="scope">
            ¥{{scope.row.company_price}}
          </template>
        </el-table-column>
        <el-table-column prop="operate_price" label="运营收费">
          <template slot-scope="scope">
            ¥{{scope.row.operate_price}}
          </template>
        </el-table-column>
        <el-table-column prop="store_price" label="商户收费">
          <template slot-scope="scope">
            ¥{{scope.row.store_price}}
          </template>
        </el-table-column>
        <el-table-column prop="company_status" label="支付通道划账">
          <template slot-scope="scope">
            {{scope.row.company_status == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="operate_status" label="商户划账">
          <template slot-scope="scope">
            {{scope.row.operate_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="send_status" label="配送划账">
          <template slot-scope="scope">
            {{scope.row.send_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="dor_manager_status" label="楼管划账">
          <template slot-scope="scope">
            {{scope.row.dor_manager_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="box_status" label="装箱划账">
          <template slot-scope="scope">
            {{scope.row.box_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="is_pay" label="支付">
          <template slot-scope="scope">
            {{scope.row.is_pay  == 1 ?'已支付':'未支付'}}
          </template>
        </el-table-column>
        <el-table-column prop="pay_type" label="支付类型">
          <template slot-scope="scope">
            {{scope.row.pay_type  == 1 ?'积分':'微信'}}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
          :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="运营划账" :visible.sync="superToOperateVisible" width="750px" :before-close="handleClose">
        <el-table :data="superToOperateTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="operate_name" label="运营名称"></el-table-column>
          <el-table-column prop="operate_bank_no" label="运营卡号"></el-table-column>
          <el-table-column prop="operate_bank_name" label="运营开户行"></el-table-column>
          <el-table-column prop="money" label="运营转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('superToOperateVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('superToOperateVisible', 1)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="商户划账" :visible.sync="toStoreVisible" width="750px" :before-close="handleClose">
        <el-table :data="toStoreTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
          <el-table-column prop="bank_no" label="商户卡号"></el-table-column>
          <el-table-column prop="bank_address" label="商户开户行"></el-table-column>
          <el-table-column prop="money" label="商户转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toStoreVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toStoreVisible', 2)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="骑手划账" :visible.sync="toSenderVisible" width="500px" :before-close="handleClose">
        <el-table :data="toSenderTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="真实姓名"></el-table-column>
          <el-table-column prop="bank_no" label="卡号"></el-table-column>
          <el-table-column prop="bank_name" label="开户行"></el-table-column>
          <el-table-column prop="money" label="转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toSenderVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toSenderVisible', 3)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="楼管划账" :visible.sync="toDorManagerVisible" width="700px" :before-close="handleClose">
        <el-table :data="toDorManagerTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="真实姓名"></el-table-column>
          <el-table-column prop="phone" label="电话号码"></el-table-column>
          <el-table-column prop="order_number" label="订单数量"></el-table-column>
          <el-table-column prop="dor_manager_price" label="每单费用"></el-table-column>
          <el-table-column prop="money" label="转账总金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toDorManagerVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toDorManagerVisible', 4)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="装箱划账" :visible.sync="toBoxVisible" width="700px" :before-close="handleClose">
        <el-table :data="toBoxTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="真实姓名"></el-table-column>
          <el-table-column prop="phone" label="电话号码"></el-table-column>
          <el-table-column prop="order_number" label="订单数量"></el-table-column>
          <el-table-column prop="box_price" label="每单费用"></el-table-column>
          <el-table-column prop="money" label="转账总金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toBoxVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toBoxVisible', 5)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="转账记录" :visible.sync="logVisible" width="1100px" :before-close="handleClose">
        <el-form :inline="true" :model="searchLogForm" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-select v-model="searchLogForm.type" placeholder="请选择转账类型">
              <el-option label="公司转账" :value="1" :disabled="info.type != 1 && info.type != 3 "></el-option>
              <el-option label="商户转账" :value="2" :disabled="info.type != 2 && info.type != 4 "></el-option>
              <el-option label="配送转账" :value="3" :disabled="info.type != 2 && info.type != 4 "></el-option>
              <el-option label="楼管转账" :value="4" :disabled="info.type != 2 && info.type != 4 "></el-option>
              <el-option label="装箱转账" :value="5" :disabled="info.type != 2 && info.type != 4 "></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.stop="searchLog(true)">搜索</el-button>
            <el-button type="success" @click.stop="searchLog">刷新</el-button>
            <el-button type="danger" @click.stop="delLog">删除</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="logTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="操作员" width="100"></el-table-column>
          <el-table-column prop="desc_name" label="收款人" width="150"></el-table-column>
          <el-table-column prop="draw_time" label="划账时间" width="260"></el-table-column>
          <el-table-column prop="num" label="划账订单数" width="90"></el-table-column>
          <el-table-column prop="money" label="收款资金">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="划账类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 1" style="color: #409EFF">公司划账</span>
              <span v-if="scope.row.type == 2" style="color: #67C23A">商户划账</span>
              <span v-if="scope.row.type == 3" style="color: #E6A23C">配送划账</span>
              <span v-if="scope.row.type == 4" style="color: #606266">楼管划账</span>
              <span v-if="scope.row.type == 5" style="color: #f56c6c">装箱划账</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="操作时间" width="150"></el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleLogSizeChange" @current-change="handleLogCurrentChange" :current-page="searchLogForm.page"
            :page-sizes="[10,20,30,40]" :page-size="searchLogForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="logCount">
          </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('logVisible')" size="small">关 闭</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { statisticalOrderList, statisticalDrawInfo, statisticalDraw, logList, delLog } from '@/network/api.js'

export default {
  name: 'order',
  data() {
    return {
      info: {},
      searchForm: {
        page: 1,
        limit: 10,
        // date: [new Date(), new Date()],
        // start: formatOnlyDate(),
        // end: formatOnlyDate(),
        date: null
      },
      searchLogForm: {
        page: 1,
        limit: 10,
        type: 0
      },
      delLogForm: {
        type: 0,
        ids: []
      },
      count: 0, // 总记录数
      table: [],
      dataList: [],
      superToOperateTable: [], // 超管给运营划账
      toStoreTable: [], // 运营给商户划账
      toSenderTable: [], // 运营给骑手划账
      toDorManagerTable: [], // 运营给楼管划账
      toBoxTable: [], // 运营给装箱划账
      logCount: 0,
      logTable: [], // 划账记录
      superToOperateVisible: false, // 超管给运营划账
      toStoreVisible: false, // 运营给商户划账
      toSenderVisible: false, // 运营给骑手划账
      toDorManagerVisible: false, // 运营给楼管划账
      toBoxVisible: false, // 运营给装箱划账
      logVisible: false // 划账记录
    }
  },
  created() {
    const info = this.$storage.get('info')
    if (info === undefined) {
      return this.$message.error('登录失效，请重新登录')
    }
    this.info = info
    this.search()
  },
  computed: {
    statusName() {
      return status => {
        switch (status) {
          case 0:
            return '已下单'
          case 1:
            return '商家接单'
          case 2:
            return '配送员接单'
          case 3:
            return '配送员送货'
          case 4:
            return '配送员确认送达'
          case 5:
            return '待评价'
          case 6:
            return '已评价'
          case 7:
            return '系统评价'
          case -1:
            return '申请退款'
          case -2:
            return '同意退款'
          case -3:
            return '拒绝退款'
          case -4:
            return '取消订单'
        }
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.dataList = val.map(v => v.id)
    },
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const form = {
          page: this.searchForm.page,
          limit: this.searchForm.limit,
          start: this.searchForm.date === null ? '' : `${this.searchForm.date[0]} 00:00:00`,
          end: this.searchForm.date === null ? '' : `${this.searchForm.date[1]} 23:59:59`
        }
        const rtn = await statisticalOrderList(form)
        this.table = rtn.data.list
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    // 每页条数变化
    handleLogSizeChange(val) {
      this.searchLogForm.limit = val
      this.searchLog()
    },
    // 当前页变化
    handleLogCurrentChange(val) {
      this.searchLogForm.page = val
      this.searchLog()
    },
    // 划账
    drawInfo(type) {
      if (this.searchForm.date === null) {
        return this.$message.error('请先选择时间段')
      }
      const start = `${this.searchForm.date[0]} 00:00:00`
      const end = `${this.searchForm.date[1]} 23:59:59`
      this.$confirm(`您将对${start} 至 ${end} 进行划账, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const formdata = {
              start: start,
              end: end,
              type
            }
            const rtn = await statisticalDrawInfo(formdata)
            switch (type) {
              case 1: // 超管给运营划账
                this.superToOperateVisible = true
                this.superToOperateTable = rtn.data.info
                break
              case 2: // 运营给商户划账
                this.toStoreVisible = true
                this.toStoreTable = rtn.data.info
                break
              case 3: // 运营给骑手划账
                this.toSenderVisible = true
                this.toSenderTable = rtn.data.info
                break
              case 4: // 运营给楼管划账
                this.toDorManagerVisible = true
                this.toDorManagerTable = rtn.data.info
                break
              case 5: // 运营给装箱划账
                this.toBoxVisible = true
                this.toBoxTable = rtn.data.info
                break
            }
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {})
    },
    async searchLog(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchLogForm.page = 1
        }
        const rtn = await logList(this.searchLogForm)
        this.delLogForm.type = this.searchLogForm.type
        this.logTable = rtn.data.list
        this.logCount = rtn.data.count
        this.logVisible = true
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    drawLog() {
      if (this.info.type === 1 || this.info.type === 3) {
        this.searchLogForm.type = 1
      } else {
        this.searchLogForm.type = 2
      }
      this.searchLog(true)
    },
    async delLog() {
      this.delLogForm.ids = this.dataList
      if (this.delLogForm.ids.length === 0) {
        return this.$message.error('请至少选择一个记录进行删除')
      }
      try {
        await delLog(this.delLogForm)
        this.searchLog()
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(done) {
      // return (done) => {
      this.dataList = []
      done()
      // }
    },
    // 取消按钮
    close(visibleName) {
      this.dataList = []
      this[visibleName] = false
    },
    draw(visible, type) {
      if (this.searchForm.date === null) {
        return this.$message.error('请先选择时间段')
      }
      const start = `${this.searchForm.date[0]} 00:00:00`
      const end = `${this.searchForm.date[1]} 23:59:59`
      if (this.dataList.length === 0) {
        return this.$message.error('请至少勾选一个')
      }
      this.$confirm(`您将对${start} 至 ${end} 进行划账, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const formdata = {
              start,
              end,
              type,
              data: this.dataList.toString()
            }
            await statisticalDraw(formdata)
            this.dataList = []
            this.search()
            this[visible] = false
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
</style>
